<template>
	<view>
		<view class="top_nav" style="">
			<view class="icon_wrap" @click="backTo"><uni-icons type="back" class="back_icon"></uni-icons></view>
			<view class="my_text" v-if="pageState == 'log'">登录</view>
			<view class="my_text" v-else>注册</view>
		</view>
		<view class="" style="width: 100vw;display: flex;justify-content: center;background-color: #F1F1F1;">
			<view class="" style="position: relative;">
				<image src="../../static/QMlogo@100x100.png" mode="" style="width: 100px;height: 100px;margin: 60rpx auto;display: block;border-radius: 50%;"></image>
				<view class="" style="text-align: center;margin: 20px;font-size: 80rpx;line-height: 80rpx;">QuickMall</view>
				<view class="" style="font-size: 50rpx;line-height: 50rpx;text-align: center;">
					欢迎
					<text v-if="pageState == 'log'">登录</text>
					<text v-else>注册</text>
				</view>
				<input class="my_input" type="text" v-model="uname" placeholder="账号" style="" />
				<input class="my_input" type="password" v-model="upwd" placeholder="密码" />
				<button type="primary" style="margin-bottom: 40rpx;" @click="login">
					<text v-if="pageState == 'log'">登录</text>
					<text v-else>注册并登录</text>
				</button>
				<button type="success" v-if="pageState == 'log'" @click="pageState = 'reg'">
					<text style="color:#999;margin-right: 20rpx;">未注册?</text>
					去注册
				</button>
				<button type="success" v-else @click="pageState = 'log'">
					<text style="color:#999;margin-right: 20rpx;">已注册?</text>
					去登录
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
export default {
	data() {
		return {
			uname: null,
			upwd: null,
			pageState: 'log',
		};
	},
	mounted() {
		if(this.isLogin!==''){
			uni.showModal({
				title: '当前已登录',
				content: '是否先退出登录',
				showCancel: false,
				cancelText: '不退出',
				confirmText: '确认退出',
				success: res => {
					localStorage.removeItem('uid')
					uni.showToast({
						title: '已退出',
						duration:700
					});
					this.$router.push('/pages/me/me')
				},
				fail: () => {},
				complete: () => {}
			});
		}
	},
	computed:{
		...mapState(['isLogin']),
	},
	methods: {
		...mapMutations(['ulogin']),
		backTo() {
			this.$router.push('/pages/index/index');
		},
		login(){
			uni.showToast({
				title: '登陆中',
				icon:'loading'
			});
			let {uname,upwd,pageState}=this
			// 部署用url
			// let url=pageState=='log'?'http://www.sword9991.cn:8000/user/mylogin':'http://www.sword9991.cn:8000/user/myreg'
			// 调试用url
			let url=pageState=='log'?'/relog/mylogin':'/relog/myreg'
			console.log(uname,upwd,url);
			uni.request({
				url,
				method: 'POST',
				data: {uname,upwd},
				// 非常重要!!若不配置请求头,则默认以application/json形式传输,导致后台解析错误
				header:{'content-type':'application/x-www-form-urlencoded'},
				success: res => {
					console.log(res);
					if(res.data.code==200){
						localStorage.setItem('uid',uname)
						this.ulogin(uname)
						uni.showToast({
							title: '登陆成功',
							duration:800
						});
						setTimeout(()=>{
							this.$router.push('/pages/me/me')
						},800)
						// setTimeout(()=>{uni.hideToast()},500)
					}else{
						uni.showToast({
							title: res.data.msg,
							duration:800,
							icon:'none'
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
	},
};
</script>
<style>
.back_icon {
	font-size: 34px !important;
	line-height: 52px;
	color: #fff !important;
}
</style>
<style lang="scss">
.top_nav {
	background: linear-gradient(132deg, #1cc4ff, #00afec);
	color: white;
	position: relative;
	text-align: center;
}
.my_input {
	width: 600rpx;
	height: 100rpx;
	border-bottom: 1px solid black;
	// text-align: center;
	margin: 30px 0 30px 0px;
	font-size: 40rpx !important;
	padding: 4px;
}
.my_text {
	width: 100vw;
	font-size: 22px;
	line-height: 52px;
	height: 52px;
	text-align: center;
}
.icon_wrap {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	// font-size: 38px !important;
	position: absolute;
	top: 0;
	left: 30rpx;
}
</style>
